<template>
  <div class="approve-flow-axis" :class="{'show-line': flowList.length}">
    <ApproveFlowItem ref="approveFlowItemRef" v-for="(item, index) in flowList" :nodeInfo="item" :key="index" :index="index" @onclose="handleClose"
                     :isLast="index === flowList.length - 1" @ondelete="handleDelete"/>
    <div class="add-flow" @click="openAddFlowNode">
      <el-icon color="#BFBFBF" size="24px">
        <Plus/>
      </el-icon>
    </div>
    <AddFlowNode ref="addFlowNodeRef" :allNode="flowList"/>
  </div>
</template>

<script>
import ApproveFlowItem from "@/views/construction/project-application/componens/ApproveFlowItem";
import AddFlowNode from "@/views/construction/project-application/componens/AddFlowNode";

export default {
  name: "ApproveFlowAxis",
  components: {AddFlowNode, ApproveFlowItem},
  props: {
    flowList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    handleDelete(index) {
      this.flowList.splice(index, 1)
    },
    openAddFlowNode() {
      this.$refs.addFlowNodeRef.open({
        resolve: (row) => {
          this.flowList.push(row)
        }
      })
    },
    handleClose(index) {
      let refs = this.$refs.approveFlowItemRef
      refs?.forEach(ref => {
        ref.closePopover(index)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.approve-flow-axis {
  position: relative;
  box-sizing: border-box;
  padding: 0 20px 70px 20px;
  margin: 20px 0 0 20px;

  .add-flow {
    cursor: pointer;
    position: absolute;
    bottom: 5px;
    left: -14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #BFBFBF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  &.show-line:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    bottom: 40px;
    width: 2px;
    background: #D7D7D7;
  }

  & .approve-flow-item:before {
    content: '';
    position: absolute;
    top: 1px;
    left: -29px;
    width: 20px;
    height: 20px;
    border: 4px solid white;
    box-sizing: border-box;
    border-radius: 50%;
    background: #D7D7D7;
  }
}
</style>
